import React, { useCallback ,useMemo, useState} from 'react';
import { Modal, Form, Input,Radio  } from 'antd';
import type { RadioChangeEvent } from 'antd';
interface Props {
  initialValues: Object | null
  isModalOpen: boolean
  parent_id:String
  onSubmit: (type:any ,values: any) => void
  onCancel: () => void
}
 // 默认值
 const defaultValues = {
  title: '',
  key: '',
  isApp:'no'
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
}
const DailogComponent = (props: Props) => {
  const {isModalOpen,onCancel,onSubmit,initialValues,parent_id} =props
  // console.log('initialValues',initialValues);
  // console.log('parent_id',parent_id);
  const isNew = useMemo(() => initialValues === null, [initialValues])
  const [form] = Form.useForm()
  const [value,setValue] = useState('')
  // ok
  const handleSubmit = useCallback(() => {
    form.validateFields().then((res) => {
      onSubmit(isNew,{...res,parent_id})
      form.resetFields()
    })
      .catch((info) => {
        console.log('Validate Failed:', info)
      })
  }, [form]);
  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value)
  };
  return (
    <>
      <Modal title={isNew ? '新建' : '编辑'} okText='确定' cancelText='取消'
       open={isModalOpen} onOk={handleSubmit} onCancel={onCancel}>
        <Form
          form={form}
          {...formItemLayout}
          name="basic"
          initialValues={initialValues ?? defaultValues}
          autoComplete="off"
        >
           <Form.Item
            label="是否主菜单"
            name="isApp"
            rules={[{ required: true, message: '输入内容!' }]}
          >
             <Radio.Group onChange={onChange} value={value}>
                <Radio value={'yes'}>是</Radio>
                 <Radio value={'no'}>否</Radio>
             </Radio.Group>
          </Form.Item>
          <Form.Item
            label="菜单名称"
            name="label"
            rules={[{ required: true, message: '请选择类型!' }]}
          >
            <Input/>
          </Form.Item>
          <Form.Item
            label="英文名称"
            name="key"
            rules={[{ required: true, message: '输入内容!' }]}
          >
            <Input/>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export default DailogComponent